<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格与表单标签示例</title>
  <style>
    table { border-collapse: collapse; width: 100%; margin: 20px 0; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }
    th { background-color: #f5f5f5; }
    form { max-width: 500px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; }
    .form-group { margin-bottom: 15px; }
    label { display: block; margin-bottom: 5px; }
  </style>
</head>
<body>
  <h1>表格示例：学生成绩表</h1>
  <table>
    <caption>2024年春季学期期末成绩</caption>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th colspan="3">成绩（满分100）</th> <!-- 跨3列 -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2024001</td>
        <td>张三</td>
        <td>92</td>
        <td>88</td>
        <td>95</td>
      </tr>
      <tr>
        <td>2024002</td>
        <td>李四</td>
        <td>85</td>
        <td>90</td>
        <td>82</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2">平均分</td> <!-- 跨2列 -->
        <td>88.5</td>
        <td>89</td>
        <td>88.5</td>
      </tr>
    </tfoot>
  </table>
  <h1>表单示例：用户注册</h1>
  <form action="/submit" method="post">
    <div>
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" required placeholder="请输入用户名">
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email" required placeholder="请输入邮箱">
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" required minlength="6">
    </div>
    <div>
      <label>性别：</label>
      <input type="radio" id="male" name="gender" value="male" checked>
      <label for="male">男</label>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">女</label>
    </div>
    <div>
      <label>爱好：</label>
      <input type="checkbox" id="reading" name="hobby" value="reading">
      <label for="reading">阅读</label>
      <input type="checkbox" id="coding" name="hobby" value="coding">
      <label for="coding">编程</label>
    </div>
    <div>
      <label for="city">城市：</label>
      <select id="city" name="city">
        <option value="">请选择</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
      </select>
    </div>
    <div>
      <label for="intro">个人简介：</label>
      <textarea id="intro" name="intro" rows="4" cols="30" placeholder="请输入个人简介"></textarea>
    </div>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
  </form>
</body>
</html>